<template>
  <div id="process">
    <div class="list-wrap">
      <div class="item">
        <yd-tab>
          <yd-tab-panel label="订单列表">
            <yd-infinitescroll :callback="loadMoreOne" ref="loadMoreOne">
              <div slot="list">
                <div>
                  <group v-for="(item,index) in roleOneData" :key="index" @click.native="toPageDetail(item.orderid)">
                    <cell title="订单号" :value="item.orderCode"></cell>
                    <cell-form-preview :list="item.list"></cell-form-preview>
                  </group>
                </div>
                <div class="no-list" v-if="roleOneData.length ===0">
                  <img :src="noneimg">
                  <div class="text">空空如也~~</div>
                </div>
              </div>
              <span slot="doneTip" class="nodata-text">我是有底线的</span>
              <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading12.svg" />
            </yd-infinitescroll>
          </yd-tab-panel>
        </yd-tab>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import getUrl from "../../../static/js/getUrl.js";
  import apis from '../../../static/js/api.js'
  import noneimg from '@/assets/img/none.svg'
  import {
    CellFormPreview,
    Group,
    Cell
  } from "vux";
  export default {
    components: {
      CellFormPreview,
      Group,
      Cell,
    },
    data() {
      return {
        noneimg,  //空数据图片
        page:1,  // 页数初始值
        pagesize: 10, // 每页请求的数据条数
        roleOneData: [],   // 订单数据
        wxuserinfoid: '', //微信用户id
        userInfo: {} //用户信息
      };
    },
    created() {
      // 从地址链接上取微信用户id
      this.wxuserinfoid = getUrl().wxuserinfoid;
      if (this.wxuserinfoid) {
        // 可以进行后续的操作
        this.postUserInfo()
      } else {
        // 否则的话没有用户id,提示用户信息不存在，请重试或联系管理员
        this.$vux.alert.show({
          title: '错误提示',
          content: '用户信息不存在，请重试或联系管理员',
        })
      }
    },
    methods: {
      postUserInfo() {
        this.$vux.loading.show({
          text: "正在加载"
        });
        var qs = require('querystring')
        this.$axios.post(`${apis}/auth/messagep`,
            qs.stringify({
              vid: this.wxuserinfoid
            }))
          .then(response => {
            if (response.data) {
              this.$vux.loading.hide();
              this.userInfo = response.data;
              localStorage.setItem('userInfo', JSON.stringify(this.userInfo));
              if (this.userInfo.wxuserinfo.id <= 0) {
                // 没有权限 ，提示没有访问权限·
                this.$vux.alert.show({
                  title: '提示',
                  content: '获取用户信息错误',
                })
              } else {
                //获取数据
                this.postRoleData();
              }
            }
          })
          .catch(error => {
            console.log(error)
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 获取角色的数据
      postRoleData() {
        this.$axios
          .post(
            `${apis}/app/order/userorderlist`,
            this.confusion(
              JSON.stringify({
                wxuserinfoid: this.wxuserinfoid,
                page: 1,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          )
          .then(response => {
            const _list = response.data
            this.roleOneData = [...this.roleOneData, ..._list]
            if (_list.length < this.pagesize) {
              /* 所有数据加载完毕 */
              this.$refs.loadMoreOne.$emit('ydui.infinitescroll.loadedDone')
              return
            }
            /* 单次请求数据完毕 */
            this.$refs.loadMoreOne.$emit('ydui.infinitescroll.finishLoad')
            this.page++
          })
          .catch(error => {
            console.log(error);
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: "服务器异常"
            });
          });
      },
      // 获取角色1的更多数据
      loadMoreOne() {
        this.$axios
          .post(
            `${apis}/app/order/userorderlist`,
            this.confusion(
              JSON.stringify({
                wxuserinfoid: this.wxuserinfoid,
                page: this.page,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          ).then((response) => {
            const _list = response.data
            this.roleOneData = [...this.roleOneData, ..._list]
            if (_list.length < this.pagesize) {
              /* 所有数据加载完毕 */
              this.$refs.loadMoreOne.$emit('ydui.infinitescroll.loadedDone')
              return
            }
            /* 单次请求数据完毕 */
            this.$refs.loadMoreOne.$emit('ydui.infinitescroll.finishLoad')
            this.page++
          }).catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 调转到订单详情页
      toPageDetail(id) {
        this.$router.push({
          path: "/orderinfo",
          query: {
            id: id,
            wxuserinfoid: this.wxuserinfoid
          }
        });
      }
    }
  };
</script>

<style scoped>
  .no-list {
    width: 60%;
    margin: 50px auto;
  }
  .text {
    width: 70%;
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
  }
</style>
